<template>
  <div>
    <a-button type="primary" @click="setConnect()">
      设置链接
    </a-button>
    <a-modal
      width="800px"
      class="modal"
      title="连接设置"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div class="modal-body">
        <div class="modal-body-aside">
          <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-item>
              <a-button type="primary" ghost style="width: 200%" @click="handleAddConnect">
                <a-icon type="plus" /> 创建新连接
              </a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="danger" ghost style="width: 200%" @click="handleDeleteConnect">
                <a-icon type="minus" /> 删除该连接
              </a-button>
            </a-form-item>
          </a-form>
        </div>
        <div v-show="!ifCreatConnectFlag" class="modal-body-main">
          <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-item
              label="ProfileName"
            >
              <a-input v-model="list.connectName" placeholder="连接名称" />
            </a-form-item>
            <a-form-item
              label="Address"
            >
              <a-input v-model="list.address" placeholder="地址" />
            </a-form-item>
            <a-form-item
              label="Port"
            >
              <a-input v-model="list.port" placeholder="端口号" />
            </a-form-item>
            <a-form-item label="Username">
              <a-input
                v-model="list.userName"
                v-decorator="[
                  'userName',
                  { rules: [{ required: true, message: '请输入用户名' }] },
                ]"
                placeholder="用户名"
              >
                <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
              </a-input>
            </a-form-item>
            <a-form-item label="Password">
              <a-input
                v-model="list.password"
                v-decorator="[
                  'password',
                  { rules: [{ required: true, message: '请输入密码' }] },
                ]"
                type="password"
                placeholder="密码"
              >
                <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
              </a-input>
            </a-form-item>
          </a-form>
        </div>
        <div v-show="ifCreatConnectFlag" class="modal-body-main">
          <a-form :label-col="labelCol" :wrapper-col="wrapperCol" :form="form">
            <a-form-item
              label="ProfileName"
            >
              <a-input
                v-model="addList.connectName"
                v-decorator="[
                  'connectName',
                  { rules: [{ required: true, message: '请输入连接名' }] },
                ]"
                placeholder="连接名称"
              />
            </a-form-item>
            <a-form-item
              label="Address"
            >
              <a-input
                v-model="addList.address"
                v-decorator="[
                  'address',
                  { rules: [{ required: true, message: '请输入地址' }] },
                ]"
                placeholder="地址"
              />
            </a-form-item>
            <a-form-item
              label="Port"
            >
              <a-input
                v-model="addList.port"
                v-decorator="[
                  'port',
                  { rules: [{ required: true, message: '请输入端口号' }] },
                ]"
                placeholder="端口号"
              />
            </a-form-item>
            <a-form-item label="Username">
              <a-input
                v-model="addList.userName"
                v-decorator="[
                  'userName',
                  { rules: [{ required: true, message: '请输入用户名' }] },
                ]"
                placeholder="用户名"
              >
                <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
              </a-input>
            </a-form-item>
            <a-form-item label="Password">
              <a-input
                v-model="addList.password"
                v-decorator="[
                  'password',
                  { rules: [{ required: true, message: '请输入密码' }] },
                ]"
                type="password"
                placeholder="密码"
              >
                <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
              </a-input>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {
  addConnectInfo,
  deleteConnectInfoByConnectKey,
  fetchConnectInfoByConnectKey,
  updateConnectInfoByConnectKey
} from '@/api/modal'

export default {
  name: 'PropertiesButton',
  props: {
    connectKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: { // 原有列表信息
        connectName: 'eq', // 连接名
        address: 'wqe', // 地址
        port: 'qwe', // 端口号
        userName: 'weq', // 用户名
        password: 'weq' // 密码
      },
      addList: { // 新增列表信息
        connectName: '', // 连接名
        address: '', // 地址
        port: '', // 端口号
        userName: '', // 用户名
        password: '' // 密码
      },
      deleteList: { // 删除列表信息
        connectKey: ''
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      temp: { //  查询列表
        connectKey: ''
      },
      ifCreatConnectFlag: false, // 是否创建新连接
      form: this.$form.createForm(this, { name: 'add_form' }),
      ifFormFlag: false, //  表单默认不通过
      visible: false,
      confirmLoading: false,
      ifSubmit: false // modal内容是否提交 默认为否
    }
  },
  watch: {

  },
  mounted() {
    this.ifCreatConnectFlag = false
    this.getConnectInfo()
  },
  methods: {
    // 设置链接
    setConnect() {
      this.ifCreatConnectFlag = false
      this.visible = true
    },
    //  通过connectKey得到连接信息
    getConnectInfo() {
      this.temp.connectKey = this.connectKey
      fetchConnectInfoByConnectKey(this.temp).then((res) => {
        this.list = res.data.connectInfo
      })
    },
    //  通过connectKey更新连接信息
    updateConnectInfo() {
      updateConnectInfoByConnectKey(this.list).then(() => {
        this.openNotification()
      })
    },
    //  提交后的提示框
    openNotification() {
      setTimeout(() => {
        this.$notification.success({
          message: '更新成功',
          description:
            '连接信息已经跟新了',
          onClick: () => {
            console.log('Notification 打开过了!')
          }
        })
      }, 2000)
    },
    // 点击创建新连接按钮方法
    handleAddConnect() {
      // this.list = null
      this.ifCreatConnectFlag = true
    },
    // 点击删除连接按钮方法
    handleDeleteConnect() {
      this.$confirm('此操作将删除该连接, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteConnectInfo()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 新增连接方法
    addConnect() {
      addConnectInfo(this.addList).then(() => {
        setTimeout(() => {
          this.$notification.success({
            message: '新增成功',
            description:
              '增加连接成功',
            onClick: () => {
              console.log('Notification 增加打开过了!')
            }
          })
        }, 1500)
      })
    },
    // 通过connectKey删除连接方法
    deleteConnectInfo() {
      if (this.ifCreatConnectFlag === false) {
        this.deleteList.connectKey = this.connectKey
        deleteConnectInfoByConnectKey(this.deleteList).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.confirmLoading = true
          setTimeout(() => {
            this.visible = false
            this.confirmLoading = false
          }, 1500)
        })
      } else {
        this.$message({
          type: 'error',
          message: '无连接选定'
        })
      }
    },
    //  设置连接表单确认方法
    handleOk(e) {
      if (this.ifCreatConnectFlag === false) {
        this.updateConnectInfo()
        this.confirmLoading = true
        setTimeout(() => {
          this.visible = false
          this.confirmLoading = false
        }, 1500)
      } else {
        this.form.validateFields(err => {
          if (!err) {
            this.addConnect()
            this.confirmLoading = true
            setTimeout(() => {
              this.visible = false
              this.confirmLoading = false
            }, 1500)
          } else {
            console.log('没填')
          }
        })
      }
    },
    //  设置链接表单回调方法
    handleCancel(e) {
      this.visible = false
    }

  }
}
</script>

<style scoped>
/*设置链接弹出框*/
.modal-body {
  display: flex;
}
/*设置链接弹出框左侧*/
.modal-body-aside {
  border-radius: 0.3em;
  flex: 1;
  border: 0.3em solid rgba(231, 218, 218, 0.2);
  background-color: rgba(219, 226, 238, 0.99);
}
/*设置链接弹出框右侧*/
.modal-body-main {
  flex: 3;
  border-radius: 0.3em;
  margin-left: 0.5em;
  border: 0.5em solid rgba(231, 218, 218, 0.2);
}

</style>
